import { useState } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Breadcrumb } from 'antd';
import StatusPage from '../status/StatusPage';
import MessageListPage from '../message/MessageListPage';
import HistoryMessagePage from '../message/HistoryMessagePage';
import InfoPage from '../user/InfoPage';
import GroupStatusPage from '../status/GroupStatusPage';
import DashBoardPage from '../dashboard/DashBoardPage';
import GroupMessagePage from '../message/GroupMessagePage';
import AdminGroupStatusPage from '../status/AdminGroupStatusPage';

import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

import styles from './HomePage.css';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const HomePage = ({ dispatch, roll, menu }) => {

  const [menuItem, setMenuItem] = useState(0);

  function handleClick({ key }) {
    if (key == (menu.length - 1)) {
      dispatch({
        type: 'users/logout'
      });
    } else {
      setMenuItem(key);
      if (roll == 0 && key > 0 && key < 8) {
        key = key == 7 ? 0 : key;
        dispatch({
          type: 'message/setMessageGroup',
          payload: {
            messageGroup: key,
            AdminMessageListState: 'statuslist'
          }
        });
      }
    }

  }

  function renderItem() {
    const compList = new Array();
    switch(roll) {
      case '0':
        compList.push(<DashBoardPage />);
        [...Array(7)].map(index => compList.push(<AdminGroupStatusPage />));
        break;
      case '1':
        compList.push(<StatusPage />);
        compList.push(<HistoryMessagePage />);
        compList.push(<InfoPage />);
        compList.push(<GroupStatusPage />);
        break;
      case '2':
        compList.push(<StatusPage />);
        compList.push(<MessageListPage />);
        compList.push(<InfoPage />);
        break;
    }
    return compList;
  }

  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <h1 style={{ color: 'white', textAlign: 'center' }}>员工状态管理系统</h1>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            onClick={handleClick}
            defaultSelectedKeys={['0']}
            style={{ height: '100%', borderRight: 0 }}>
            {menu.map((item, index) => <Menu.Item key={index}>{item}</Menu.Item>)}
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            {/* <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item> */}
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              padding: 15,
              margin: 0,
              minHeight: 350,
            }}>
            {renderItem()[menuItem]}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default connect(state => {
  const { roll, menu } = state.users;
  return {
    roll,
    menu
  }
})(HomePage);

